<!doctype html>
<html>
<head>
    <title>Socket.IO chat</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font: 13px Helvetica, Arial; max-width: 640px;}
        form { background: #000; padding: 3px; position: fixed; bottom: 0;width: 100%; display: flex;}
        form input { border: 0; padding: 10px; width: 90%; margin-right: .5%;flex: 1;}
        form button { width: 100px; background: rgb(130, 224, 255); border: none; padding: 10px;font-size: 14px; }
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li>div{ padding: 5px 10px; }

        header{border-bottom: solid 1px #e2e2e2;line-height: 40px;text-align: center;}

        .login{position: fixed;z-index: 10;left: 0; top:0; right: 0; bottom: 0; background-color: #000; }
        .login .content{text-align: center;margin-top: 100px;}
        .login .content .nickname{font-size: 16px; color: #fff;margin-bottom: 20px;}
        .login input{font-size: 16px;color: #fff;background-color: #000;border: 0;border-bottom: solid 1px #fff;padding: 2px 10px;}
        input:focus{outline: none;}
        input::-webkit-input-placeholder{
            background-color: #000;
        }
        .userName{font-weight: bold;color: #a6a600;}
    </style>

</head>
<body>
<div id="app">
    <template v-if="step === 1">
        <div class="login">
            <div class="content">
                <div class="nickname">请输入您的昵称?</div>
                <input v-model="nickName" type="text" autocomplete="on" @keyup.enter="handleEnter">
            </div>
        </div>

    </template>

    <template v-if="step === 2">
        <header>{{isInputing ? '正在输入...' : '聊天室'}}</header>
        <ul id="messages">
            <li v-for="item in messageList">
                <div v-if="item.userName !== nickName" style="text-align: right; background: #eee;">
                    <span >{{item.message}}</span>
                    <span style="color: #333;" class="userName">{{item.userName}}</span>
                </div>

                <div v-else>
                    <span class="userName">{{item.userName}}</span>
                    <span>{{item.message}}</span>
                </div>

            </li>
        </ul>
        <form action="" onsubmit="return false">
            <input id="m" autocomplete="on" v-model="message"/>
            <button @click="sendMsg">发送</button>
        </form>
    </template>

</div>

</body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script src="https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                step: 1,
                isInputing: false,
                messageList:[],
                nickName: '',
                socket: null,
                message: ''
            }
        },
        methods: {
            // 发送消息
            sendMsg: function () {
                this.socket.emit('chat',{
                    userName: this.nickName,
                    message: this.message
                });
                this.message = '';
                return false
            },
            handleEnter: function () {
                this.step = 2;
            }
        },
        created: function () {
            this.socket = io();

            this.socket.on('chat', function(msg){
                vm.messageList.push(msg);
                return false
            })
        }
    })

</script>
</html>